<template>
  <div class="head">
    <slot name="title">
      <div class="title">{{ title }}</div>
    </slot>
    <div class="icon" @click.stop="$emit('headIcon')">
      <span>全部</span>
      <van-icon name="arrow" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
  },
};
</script>

<style lang='less' scoped>
.head {
  padding-bottom: 0.48rem;
  .flex(space-between, center);

  .title {
    font-size: 0.64rem;
    line-height: 0.84rem;
    font-family: STZhongsong;
    .font_color(@text-color);
  }

  .icon {
    .fa(center);
    .font_color(@text-color-grey);

    > span {
      padding-right: 0.24rem;
      font-size: 0.48rem;
      line-height: 0.68rem;
      font-family: PingFangSC-Light, PingFang SC;
      font-weight: 300;
    }

    > i {
      display: block;
      font-size: 0.48rem;
      line-height: 0.52rem;
    }
  }
}
</style>
